<template>
    <div style="min-width: 829px">
        <!-- 发货门店汇总 -->
        <div v-if="$route.path == '/shipmentSummary'">
            <div class="vs-search-box">
                <el-form v-search-box-enter ref="form" :inline="true" :model="paging" label-width="110px">
                    <el-form-item label="商品分类">
                        <el-select v-model="paging.type" clearable @change="handleCurrentChange(1)">
                            <el-option label="毛坯" :value="2"></el-option>
                            <el-option label="定制成品" :value="1"></el-option>
                            <el-option label="标准成品" :value="6"></el-option>
                            <el-option label="洗护用品" :value="3"></el-option>
                            <el-option label="其他" :value="4"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="查询时间段：">
                        <el-date-picker v-model="bill_time_start" type="daterange" format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间"
                            style="width: 300px"> </el-date-picker>
                    </el-form-item>
                    <el-form-item class="vs-right-btns">
                        <el-button @click="reset">重置</el-button>
                        <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box">
                <div class="operation-box clear-float">
                    <el-button v-if="utils.getIsShopowner()" style="margin-left: auto" @click="exportFn"
                        icon="el-icon-download" type="primary">导出</el-button>
                </div>
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table"
                    style="width: 100%" border :key="paging.type" v-if="paging.type == 3 || paging.type == 4"
                    show-summary :summary-method="getSummaries">
                    <el-table-column prop="id" label="序号" align="center"></el-table-column>
                    <el-table-column prop="date" label="日期" align="center"></el-table-column>
                    <el-table-column prop="type" label="类别" align="center"></el-table-column>
                    <el-table-column prop="sku_text" label="规格" align="center"></el-table-column>
                    <el-table-column prop="unit" label="单位" align="center"></el-table-column>
                    <el-table-column prop="send_quantity" label="数量" align="center"></el-table-column>
                    <el-table-column prop="send_price" label="单价" align="center"></el-table-column>
                    <el-table-column prop="total" label="金额" align="center"> </el-table-column>
                </el-table>
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table"
                    style="width: 100%" border :key="paging.type + 2" v-else-if="paging.type == 6" show-summary
                    :summary-method="getSummaries">
                    <el-table-column prop="id" label="序号" align="center"></el-table-column>
                    <el-table-column prop="date" label="日期" align="center"></el-table-column>
                    <el-table-column prop="realname" label="会员姓名" align="center"></el-table-column>
                    <el-table-column prop="goods_name" label="产品名称" align="center"></el-table-column>
                    <el-table-column prop="sex_type" label="标准成品类型" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.sex_type == 353 ? '男款' : scope.row.roughcast_type == 354 ? '女款' : '' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="roughcast_name" label="毛坯种类" align="center"></el-table-column>
                    <el-table-column prop="item_name" label="款号" align="center"></el-table-column>
                    <el-table-column prop="size_name" label="尺寸" align="center"></el-table-column>
                    <el-table-column prop="colour_name" label="颜色" align="center"></el-table-column>
                    <el-table-column prop="send_quantity" label="数量" align="center"></el-table-column>
                    <el-table-column prop="send_price" label="单价" align="center"></el-table-column>
                    <el-table-column prop="total" label="金额" align="center"></el-table-column>
                </el-table>
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table"
                    style="width: 100%" border :key="paging.type + 1" v-else show-summary
                    :summary-method="getSummaries">
                    <el-table-column prop="id" label="序号" align="center"></el-table-column>
                    <el-table-column prop="date" label="日期" align="center"></el-table-column>
                    <el-table-column prop="type" label="类别" align="center"></el-table-column>
                    <el-table-column prop="realname" label="会员姓名" align="center"></el-table-column>
                    <el-table-column prop="goods_name" label="产品名称" align="center"></el-table-column>
                    <el-table-column prop="blank_type_name" label="毛坯种类" align="center"></el-table-column>
                    <el-table-column prop="needle_type_name" label="递针类型" align="center"></el-table-column>
                    <el-table-column prop="size_name" label="尺寸" align="center"></el-table-column>
                    <el-table-column prop="sex_name" label="性别" align="center"></el-table-column>
                    <el-table-column prop="length_name" label="长度" align="center"></el-table-column>
                    <el-table-column prop="colour_name" label="颜色" align="center"></el-table-column>
                    <el-table-column prop="send_quantity" label="数量" align="center"></el-table-column>
                    <el-table-column prop="send_price" label="单价" align="center"></el-table-column>
                    <el-table-column prop="total" label="金额" align="center"></el-table-column>
                </el-table>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            bill_time_start: [],
            paging: {
                page: 1,
                total: 0,
                limit: 10,
                type: 2,
            },
            tableData: [],
        };
    },
    created() {
        if (this.$route.path == '/shipmentSummary') {
            this.bill_time_start[0] = this.$moment().startOf('month').format('YYYY-MM-DD');
            this.bill_time_start[1] = this.$moment().endOf('month').format('YYYY-MM-DD');
            this.handleCurrentChange(1);
        }
    },
    methods: {
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index == 0) {
                    sums[index] = '合计';
                    return;
                }
                const values = data.map((item) => Number(item[column.property]));
                if (column.property == 'total') {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                    sums[index] = sums[index].toFixed(2);
                } else if (column.property == 'send_quantity') {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                } else {
                    sums[index] = '';
                }
            });
            return sums;
        },
        // 导出
        async exportFn() {
            if (!this.bill_time_start) {
                this.bill_time_start = [];
            }
            this.paging.date_start = this.bill_time_start[0] || '';
            this.paging.date_end = this.bill_time_start[1] || '';
            let obj = Object.assign({}, this.paging);
            let url = this.utils.data.baseURL + 'store/finance/exportTakeTicket';
            this.utils.urlToBlob(url, '总部发货门店汇总', obj);
        },
        async repairGetList() {
            if (!this.bill_time_start) {
                this.bill_time_start = [];
            }
            this.paging.date_start = this.bill_time_start[0] || '';
            this.paging.date_end = this.bill_time_start[1] || '';
            let obj = Object.assign({}, this.paging);
            this.loading = true;
            let { code, data } = await this.$Http.getTakeTicket(obj);
            this.loading = false;
            if (code) {
                this.tableData = data;
                for (let o of this.tableData) {
                    this.$set(o, 'total', o.send_quantity * o.send_price);
                }
                // this.paging.total = data.total;
            }
        },
        reset() {
            //重置
            this.bill_time_start = ["", ""]
            this.bill_time_start[0] = this.$moment().startOf('month').format('YYYY-MM-DD');
            this.bill_time_start[1] = this.$moment().endOf('month').format('YYYY-MM-DD');
            this.paging = this.$options.data().paging;
            this.handleCurrentChange(1);
        },
        handleSizeChange(val) {
            this.paging.limit = val;
            this.repairGetList();
        },
        handleCurrentChange(val) {
            this.paging.page = val;
            this.repairGetList();
        },
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
    width: 130px;
    height: 130px;
}

.divTable {
    width: 100%;

    div {
        border-bottom: 1px solid #ebeef5;
        border-left: 1px solid #ebeef5;
        border-right: 1px solid #ebeef5;
        height: 50px;
        line-height: 50px;
        padding-left: 30px;
    }
}
</style>
